<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>豆瓣榜单</title>
    <link rel="stylesheet" href="./css/common.css">
    <script src="./fonts/iconfont.js"></script>
</head>
<style>
   ul{
        padding: 0;
        margin: 0;
        list-style:none;
    }
    .txt .n{
        font-size: 8vw;
        color: red;
        left: 50vw;
    }
    .jlist li{
        display: flex;
        line-height: 0.5;/* 更改文字之间的行间距 */
    }
    .jlist img{
        width: 35vw;
        height: 28vw;
        border-radius: 2vw;
        margin-left: 8vw;
       margin-top: 1vw;
    }
    .name{
        margin-left: 5vw;
        margin-top: 1vw;
        line-height: 1.5;
    }
   .jlist .top{
        background-color: rgb(67, 53, 53);
        color: #c0bebe93;
    }
    .top h3{
        margin-left: 15vw;
        font-size: 5vw;
        color: #fff;
    }
    .top p{
        margin-left: 15vw;
        font-size: 3vw;
    }

    .author{
        color: #867979;
        font-style: 2vw;
        font-size: 3vw;
        line-height: 1.5;
        margin-top: 2vw;
        margin-left: 3vw;
        color: #867979;
        font-size: 3vw;
    }
    .title{
        color: blue;
        border: 1px solid blue;
        border-radius: 1vw;
        font-size: 3vw;
        margin-left: 3vw;
    }
    .n{
        font-style: 10vw;
        color: red;
        margin-left: 10vw;
        margin-top: 17vw;
    }
    .content{
        font-size: 3vw;
        color: #867979;
        margin-left: 3vw;
    }
    .jlist #bnav{
        position: absolute;
        left: -115px;
        margin-top: -52px;
    }
</style>

<body>
    <ul class="jlist">
        <div class="top">  
            <nav id="bnav">
                <ul>
                    <li>
                        <div>
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-fanhui"></use>
                            </svg>
                        </div>
                    </li>
                </ul>
            </nav>
            <h3>实时热门电视</h3>
            <p>豆瓣榜单</p>
        </div>
        
    </ul>
    <script>
        var jarr= [
        {
            n:1,
            img: "榜单1.jpg",
            name:"神隐(2023)",
            content:"暂无评分",
            title: "电视剧",
            author: "2023/中国大陆/剧情/爱情 奇幻 古装/陈家霖 李才/赵露丝...",
        },
        {
            n:2,
            img: "榜单2.jpg",
            name:"鸣龙少年(2023)",
            link2: "https://imgse.com/i/pignaxU",
            content:"暂无评分",
            title: "电视剧",
            author: "2023/中国大陆/剧情/张若昀 黄尧...",
        },
        {
            n:3,
            img: "榜单3.jpg",
            name:"一念关山(2023)",
            link3: "https://imgse.com/i/pignaxU",
            content:"7.3",
            title: "电视剧",
            author: "2023/中国大陆/动作 古装/周靖韬 邹曦/刘诗诗 刘宇宁...",
        },
        {
            n:4,
            img: "榜单4.jpg",
            name:"新闻女王(2023)",
            content:"7.9",
            title: "电视剧",
            author: "2023/中国香港/剧情/陈海斌 姜振杰/余诗曼 马...",
        },
        {
            n:5,
            img: "榜单5.jpg",
            title: "电视剧",
            name:"与恶魔有约(2023)",
            content:"8.2",
            author: "2023/韩国/剧情 爱情 奇幻 /金章汉 权多顺/金裕贞 宋江...",
        },
        {
            n:6,
            img: "榜单6.jpg",
            name:"南海归墟(2023)",
            content:"6.5",
            title: "电视剧",
            author: "2023/中国大陆/剧情 动作 冒险/蔡岳勋/潘粤明 张雨绮...",
        },
    ];
    var jlist=document.querySelector(".jlist");
        jarr.forEach((v,i)=>{
            let li=document.createElement("li");
            li.innerHTML=`
            <span class="n"><strong>${v.n}</strong></span>
            <img src="./images/${v.img}">
                <div class="txt">
                    <p class="name"><strong>${v.name}</strong></p><br>                 
                    <p class="content">${v.content}</p><br>
                    <span class="title">${v.title}</span> 
                    <p class="author">${v.author}</p>      
                </div>                 
            `;
            jlist.appendChild(li);
        });
        
       
        </script>
</body>
</html>